<template>
  <div class="page-container">
    <!--面包屑导航-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>营销工具</el-breadcrumb-item>
        <el-breadcrumb-item>大转盘模板管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--查询条件-->
    <div class="toolbar">
      <p class="admin">大转盘模板管理</p>
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-row class="search-input">
          <el-row class="times mr30">
            <el-form-item prop="createStartTime" label="创建时间：" class="times">
              <el-date-picker
                v-model="filters.createStartTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="开始时间"
                :picker-options="startTimeCheck"
                class="input_postion"
              ></el-date-picker>
            </el-form-item>
            <span class="times-to">-</span>
            <el-form-item prop="createEndTime">
              <el-date-picker
                v-model="filters.createEndTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="结束时间"
                class="input_postion"
                :picker-options="endTimeCheck"
              ></el-date-picker>
            </el-form-item>
          </el-row>
          <el-form-item prop="templateName" label="模板名称：">
            <el-input clearable v-model="filters.templateName" placeholder="输入模板名称" maxlength="60"></el-input>
          </el-form-item>
        </el-row>
        <!--操作按钮-->
        <el-row class="search-button">
          <el-form-item>
            <el-button class="resetButton" size="mini" icon="el-icon-refresh" @click="resetFiltersForm()">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="searchButton" size="mini" icon="el-icon-search" @click="findPageClick">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button class="searchButton" size="mini" @click="createLargeTrun">创建模板</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

    <!--模板列表-->
    <div class="tab-container">
      <el-row :gutter="40">
        <el-col
          :span="8"
          v-for="(o, index) in largeTrunDatas"
          :key="o.id"
          :offset="index > 0 ? 2 : 0"
        >
          <el-card>
            <div
              class="cardImg"
              :style="{backgroundImage: 'url(' + o.descJson.homeJson.mainBgImage + ')' }"
            ></div>
            <div class="info t_l">
              <p>{{o.templateName}}</p>
              <p class="createTime">创建时间：{{o.createTime}}</p>
              <div class="bottom flex">
                <el-button
                  type="text"
                  class="button"
                  @click="editLargeTrun(o)"
                  v-if="o.templateType != 2"
                >编辑</el-button>
                <el-button
                  type="text"
                  class="button"
                  @click="deleteLargeTrun(o)"
                  v-if="o.templateType != 2"
                >删除</el-button>
                <el-button type="text" class="button" @click="seeLargeTrun(o)">预览</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!--分页栏-->
    <div class="toolbar t_r" v-if="largeTrunDatas && largeTrunDatas.length > 0">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="refreshPageRequest"
        :current-page="filters.start"
        :page-size="filters.limit"
        :total="totalSize"
        :page-sizes="[15, 30, 45, 60]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import marketRequest from "@/market/request/marketRequest";

export default {
  name: "largeTrunTable",
  components: {},
  data() {
    return {
      size: "mini",

      filters: {
        createStartTime: null,
        createEndTime: null,
        templateName: null,
        start: 1,
        limit: 15
      },
      totalSize: 0,

      largeTrunDatas: [],

      // 开始时间校验
      startTimeCheck: {
        disabledDate: time => {
          if (
            this.filters.createEndTime != null &&
            this.filters.createEndTime != "" &&
            this.filters.createEndTime != undefined
          ) {
            return (
              time.getTime() > new Date(this.filters.createEndTime) - 8.64e7
            );
          }
        }
      },

      // 结束时间校验
      endTimeCheck: {
        disabledDate: time => {
          if (
            this.filters.createStartTime != null &&
            this.filters.createStartTime != "" &&
            this.filters.createStartTime != undefined
          ) {
            return (
              time.getTime() - 8.64e7 < new Date(this.filters.createStartTime)
            );
          }
        }
      }
    };
  },
  methods: {
    //创建
    createLargeTrun() {
      this.$router.push({
        //path: "/pages/MarketingTools/LargeTurntable/LargeTurntableCreate"
        path: "/pages/MarketingTools/LargeTurntable/LargeTurntableCreate/" + 0
      });
    },

    //编辑
    editLargeTrun(row) {
      this.$router.push({
        path:
          "/pages/MarketingTools/LargeTurntable/LargeTurntableCreate/" + row.id
        //path: `/pages/MarketingTools/LargeTurntable/LargeTurntableCreate?id=${row.id}`
      });
    },

    //删除
    deleteLargeTrun(row) {
      let this_ = this;
      this.$confirm(
        '<p>您确定要删除该模板？</p><p style="color:red">删除后不可恢复</p>',
        "提示",
        {
          type: "warning",
          dangerouslyUseHTMLString: true,
          closeOnClickModal: false
        }
      )
        .then(() => {
          if (row != null) {
            marketRequest.largeTurntableTemplateDelete({ id: row.id }, function(
              res
            ) {
              if (res.code == "0000") {
                this_.$message({ message: "删除成功！", type: "success" });
                this_.findPage();
              } else {
                this_.$message({
                  message: "操作失败, " + res.msg,
                  type: "error"
                });
              }
            });
          }
        })
        .catch(() => {});
    },

    //预览
    seeLargeTrun(row) {
      this.$router.push({
        path:
          "/pages/MarketingTools/LargeTurntable/LargeTurntablePreview/" + row.id
      });
    },

    //重置
    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
      }
    },

    //重置查询条件
    resetFiltersForm() {
      //需要校验的keys
      let keys = ["createStartTime", "createEndTime", "templateName"];
      //调用校验
      let boo = this.seachTableUtils.checkFromIsNull(this.filters, keys);
      if (!boo) {
        return;
      }

      this.filters.start = 1;
      this.resetForm("filters");
      //重新调接口
      this.findPage();
    },

    findPageClick() {
      this.filters.start = 1;
      this.findPage();
    },

    //查询模板列表
    findPage() {
      let this_ = this;
      let callback = res => {
        if (res.code == "0000" && res.data.rows.length > 0) {
          this_.largeTrunDatas = [];
          res.data.rows.forEach((item, index) => {
            let largeTrunData = JSON.parse(JSON.stringify(item));
            this_.largeTrunDatas.push(largeTrunData);
          });
          this_.totalSize = res.data.total;
        } else {
          this_.largeTrunDatas = [];
          this_.$message({ message: "暂无数据", type: "warning" });
        }
      };
      marketRequest.largeTurntableTemplateListByPage(this.filters, callback);
    },

    // 换页刷新-start
    refreshPageRequest: function(val) {
      this.filters.start = val;
      this.findPage();
    },

    // 换页刷新-limit
    handleSizeChange: function(val) {
      this.filters.limit = val;
      this.filters.start = 1;
      this.findPage();
    }
  },

  created() {
    this.findPage();
  },
  mounted() {}
};
</script>


<style scoped lang="scss">
.admin {
  font-size: 22px;
  margin-bottom: 40px;
  text-align: left;
}
.reset {
  background-color: #fff;
  color: #409eff;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/deep/ .cell {
  .el-button {
    padding: 0 5px !important;
  }
}
.tab-container {
  font-size: 18px;
  color: #333;
  .cardImg {
    height: 330px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 0;
  }
  .info {
    width: 100%;
    height: 158px;
    position: absolute;
    bottom: 0;
    left: 0;
    p {
      padding: 0 40px;
      margin-top: 24px;
    }
    .createTime {
      font-size: 15px;
    }
    .bottom {
      width: 100%;
      height: 54px;
      line-height: 54px;
      background: #e7f3fb;
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
    }
  }
  .create {
    height: 100%;
    justify-content: center;
    cursor: pointer;
    img {
      width: 40px;
      height: 40px;
    }
    .flex {
      justify-content: center;
    }
    /deep/ .el-card__body {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    p {
      width: 100%;
      margin-top: 4px;
    }
    .el-icon-circle-plus-outline {
      font-size: 40px;
      color: #409eff;
    }
  }
  /deep/ .el-col {
    margin-bottom: 40px;
    .el-card {
      .el-card__body {
        height: 488px;
        position: relative;
        padding: 0;

        .el-image {
          width: 100%;
          height: 330px;
        }
      }
    }
  }
}
</style>
